<template>
  <div class="index-container">
    <div class="content">
      <form action="/">
        <!-- show-action:搜索框后面取消按钮  shape：搜索框形状 -->
        <van-search
          v-model="value"
          show-action
          maxlength="10"
          shape="round"
          placeholder="请输入搜索关键词"
          @search="onSearch"
          @cancel="onCancel"
          @update:model-value="getkeyWordList"
          @blur="unhide = false"
        />
      </form>
    </div>
    <!-- 输入框有关键字的时候 -->
    <div v-if="show">
      <div class="grid" v-if="albumResultList">
        <div class="images">
          <img
            :src="albumResultList.imgPath"
            alt=""
            style="width: 40px; height: 40px; border-radius: 4%"
          />
        </div>
        <div>
          <div class="word">
            {{ albumResultList.keyword }}
          </div>
          <div class="bottom">
            <span class="book">{{ albumResultList.category }}</span>
            <div style="margin-left: 15px">
              <el-icon><Headset /></el-icon>
              {{ albumResultList.play }}
            </div>
            <div style="margin-left: 15px">
              <el-icon><Paperclip /></el-icon>
              {{ albumResultList.tracks }}集
            </div>
          </div>
        </div>
      </div>
      <ul class="first">
        <li
          class="list"
          :v-if="item.keyword"
          v-for="item in queryResultList"
          :key="item.id"
        >
          {{ item.keyword }}
        </li>
      </ul>
    </div>

    <!-- 输入框没有东西的时候 -->
    <div class="below" v-else="!show">
      <!-- 搜索历史 面包屑 -->
      <div>
        <div class="history" v-if="value.length>0">
          <div class="search-history">搜索历史</div>
          <el-icon :size="17"><Delete @click="handle1" /></el-icon>
        </div>
        <div>

        </div>
      
      </div>

      <div class="navBar" :click-tab="getWholeList()">
        <van-tabs color="#f06742" v-model:active="activeName" line-width="18px">
          <van-tab
            v-for="item in category"
            :key="item.categoryId"
            :title="item.categoryName"
          >
            <ul class="sort">
              <li
                class="all"
                v-for="(whole, index) in wholeList"
                :key="index"
                @click="handle"
              >
                <span class="num">{{ index + 1 }}</span>
                <div class="designation">{{ whole.word }}</div>
                <div class="arrows">
                  <span class="up" v-if="whole.shift == 1">⬆</span>
                  <span class="down" v-else>⬇</span>
                </div>
              </li>
            </ul>
          </van-tab>
        </van-tabs>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { ref, onMounted } from 'vue'
import { reqCategory, reqWholeList, reqKeywordList } from '@/api/search'
import { showDialog } from 'vant'

const value = ref('')
const onSearch = ref()
const router = useRouter()
const activeName = ref()
const albumResultList = ref()
const show = ref(false)

const unhide = ref<boolean>(false)
const queryResultList = ref()

// qin取消按钮
const onCancel = () => {
  router.back()
}

// 跳转登录按钮的回调
const handle = () => {
  const token = localStorage.getItem('TOKEN')
  if (token) {
    router.push({
      name: 'home',
    })
  } else {
    showDialog({
      message: '请先登录',
    })
    router.push({
      name: 'login',
    })
  }
}
// 删除按钮
const handle1 = () => {
  showDialog({
    message:'你确定要删除吗？'
  })
}

// 组件挂载
onMounted(() => {
  getcategoryList()
})

// 分类列表
const category = ref()
// 获取分类列表
const getcategoryList = async () => {
  try {
    let result = await reqCategory()
    console.log(result)
    category.value = result.category
  } catch (error) {
    console.log(error)
  }
}

// 关键字列表
const wholeList = ref<any>({})
// 获取分类下的关键字列表
const getWholeList = async () => {
  try {
    let result = await reqWholeList(
      category.value[activeName.value || 0].categoryId,
      20,
    )
    console.log(result)
    wholeList.value = result.hotWordResultList
  } catch (error) {
    console.log(error)
  }
}

// 关键字搜索
const getkeyWordList = async () => {
  show.value = true
  unhide.value = true
  if (value.value == '') {
    show.value = false
  }
  try {
    let res = await reqKeywordList(value.value, 0)
    console.log(res)
    albumResultList.value = res.data.result.albumResultList[0]
    queryResultList.value = res.data.result.queryResultList
    console.log(queryResultList.value)
  } catch (error) {
    console.log(error)
  }
}
</script>

<style scoped lang="less">
::v-deep(.van-tab--active) {
  font-size: 16px;
  font-weight: 800;
}
// 关键字搜索
.grid {
  padding: 15px 0;

  display: flex;
  border-bottom: 1px solid #e9e9e9;

  height: 41px;
  margin: 0 18px;
  .word {
    width: 260px;
    font-size: 14px;
    margin-left: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .bottom {
    display: flex;
    color: #b6c5d2;
    font-size: 12px;
    margin-left: 10px;
    margin-top: 6px;
  }
  .book {
    height: 14px;
    line-height: 14px;
    text-align: center;
    border: 1px solid #e8e8ea;
    border-radius: 12%;
    width: 38px;
  }
}
.first {
  height: 40px;
  line-height: 40px;
  > li {
    font-size: 14px;
    margin: 0 16px;
    border-bottom: 1px solid #eeeeee;
    color: #40404c;
  }
}

// 搜索历史面包屑
.below {
  margin: 0 16px;
  .history {
    height: 29.8px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    padding: 10px 0px 5px;
    .search-history {
      font-size: 14.8px;
      line-height: 14.8px;
    }
  }
}

// 分类列表
.sort {
  border-top: 1px solid #fff;
  > li:nth-child(1) > .num {
    color: red;
    font-size: 25px;
  }
  > li:nth-child(2) > .num {
    color: #f86b4b;
    font-size: 25px;
  }
  > li:nth-child(3) > .num {
    color: #f8b058;
    font-size: 25px;
  }

  .all {
    display: flex;
    line-height: 45px;

    .num {
      font-size: 16px;
      color: #e0c9b7;
      width: 20px;
      margin-left: 18px;
      text-align: center;
    }
    .designation {
      font-size: 16px;
      color: #4d4d4d;
      width: 298px;
      margin-left: 10px;
      border-bottom: 2px solid #f8f8f8;
    }
  }

  .arrows {
    padding-right: 5px;
    line-height: 45px;
    border-bottom: 2px solid #f8f8f8;

    .up {
      color: #e44a3b;
    }
    .down {
      color: #93cc48;
    }
  }
}
</style>
